<template>
  <div>
    <h2>Count计算属性拿:{{ count }}</h2>
    <h2>num计算属性拿:{{ num }}</h2>

    <h2>商品的总价格是:插值拿:{{ $store.getters.allPrice }}</h2>
    <h2>商品的总价格是:计算属性拿:{{ allPrice }}</h2>

    <button @click="incrementCount">累加count</button>
    <button @click="incrementNCount({ n: 2 })">累加n count</button>
    <button @click="incrementWait">等2s再累加count</button>
    <button @click="incrementNWait({ n: 2 })">等2s再累加N count</button>
  </div>
</template>

<script>
import { INCREMENT_COUNT, INCREMENT_N_COUNT } from "@/store/mutation-types";
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
export default {
  name: "count",
  computed: {
    //开启命名空间之后,所有的辅助函数的第一个参数 只需要写上 模块名称 其他的写法一概不变
    ...mapState("countInfo", ["count", "num"]),
    ...mapGetters("countInfo", ["allPrice"]),
  },
  methods: {
    ...mapMutations("countInfo", [INCREMENT_COUNT, INCREMENT_N_COUNT]),
    ...mapActions("countInfo", ["incrementWait", "incrementNWait"]),
  },
};
</script>

<style></style>
